export const mixins = {
  data() {
    return {
      elecInfoChart: null,
      selfBuildHouseInfoChart: null,
      numTrendChart: null,
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.elecInfoChart) {
      this.elecInfoChart.dispose(); // 清理图表实例
    }
    if (this.selfBuildHouseInfoChart) {
      this.selfBuildHouseInfoChart.dispose(); // 清理图表实例
    }
    if (this.numTrendChart) {
      this.numTrendChart.dispose(); // 清理图表实例
    }
  },
  methods: {
    // 电力信息
    setElecInfo(obj, DomId) {
      this.elecInfoChart = this.$echarts.init(document.getElementById(DomId));
      this.elecInfoChart.option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "horizontal",
          right: "10",
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: obj.ydata[0].name,
            // stack: "Total",
            data: obj.ydata[0].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[0].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[0].color,
            },
          },
          {
            name: obj.ydata[1].name,
            // stack: "Total",
            data: obj.ydata[1].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[1].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[1].color,
            },
          },
        ],
        grid: {
          left: 10,
          right: 25,
          bottom: 5,
          top: 30,
          containLabel: true,
        },
      };
      this.elecInfoChart.setOption(this.elecInfoChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 自建房信息
    setSelfBuildHouseInfo(obj, DomId) {
      this.selfBuildHouseInfoChart = this.$echarts.init(
        document.getElementById(DomId)
      );
      this.selfBuildHouseInfoChart.option = {
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   orient: "horizontal",
        //   right: "10",
        //   itemWidth: 6,
        //   itemHeight: 6,
        //   icon: "circle",
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",           
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: obj.ydata[0].name,
            // stack: "Total",
            data: obj.ydata[0].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[0].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[0].color,
            },
          },
          // {
          //   name: obj.ydata[1].name,
          //   stack: "Total",
          //   data: obj.ydata[1].data,
          //   type: "line",
          //   // 设置折线颜色
          //   lineStyle: {
          //     color: obj.ydata[1].color,
          //     width: 1,
          //     type: "solid",
          //   },
          //   // 设置折点颜色
          //   itemStyle: {
          //     color: obj.ydata[1].color,
          //   },
          // },
        ],
        grid: {
          left: 10,
          right: 25,
          bottom: 5,
          top: 15,
          containLabel: true,
        },
      };
      this.selfBuildHouseInfoChart.setOption(
        this.selfBuildHouseInfoChart.option
      );
      window.addEventListener("resize", this.handleResize);
    },
    // 数量趋势
    setNumTrend(obj, DomId) {
      this.numTrendChart = this.$echarts.init(document.getElementById(DomId));
      this.numTrendChart.option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "horizontal",
          right: "10",
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: obj.ydata[0].name,
            // stack: "Total",
            data: obj.ydata[0].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[0].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[0].color,
            },
          },
          {
            name: obj.ydata[1].name,
            // stack: "Total",
            data: obj.ydata[1].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[1].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[1].color,
            },
          },
          {
            name: obj.ydata[2].name,
            stack: "Total",
            data: obj.ydata[2].data,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: obj.ydata[2].color,
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: obj.ydata[2].color,
            },
          },
        ],
        grid: {
          left: 10,
          right: 25,
          bottom: 5,
          top: 15,
          containLabel: true,
        },
      };
      this.numTrendChart.setOption(this.numTrendChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    handleResize() {
      if (this.elecInfoChart) {
        this.elecInfoChart.resize();
      }
      if (this.selfBuildHouseInfoChart) {
        this.selfBuildHouseInfoChart.resize();
      }
      if (this.numTrendChart) {
        this.numTrendChart.resize();
      }
    },
  },
};
